<template>
  <div class="date-picker">
    <scroll-container :field="DateMark.YEAR" @set-year="handleSetYear">
      <list-item v-for="year of yearArr" :key="year">{{ year }}</list-item>
    </scroll-container>
    <scroll-container :field="DateMark.MONTH" @set-month="handleSetMonth">
      <list-item v-for="month of monthArr" :key="month">{{ month }}</list-item>
    </scroll-container>
    <scroll-container :field="DateMark.DAY" @set-day="handleSetDay">
      <list-item v-for="day of data.dayArr" :key="day">{{ day }}</list-item>
    </scroll-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, provide, toRaw } from 'vue';

import { IProps, TypeData, DateMark } from './types';
import { createMonthArr, createDayArr } from './utils';

import ScrollContainer from './ScrollContainer.vue';
import ListItem from './ListItem.vue';

//根据用户传入的日期，首次渲染年份和月份的滚动条数据
const props = defineProps<IProps>();
const emit = defineEmits(['dateChange']);
const monthArr = createMonthArr();
const yearArr = props.years;

//根据用户传入的日期，进行计算出该日期下的天数，再进行首次渲染天数的滚动条数据
const data = reactive<TypeData>({
  currentDate: props.currentDate,
  dayArr: createDayArr(props.currentDate)
});

//将工具类数据提供给子组件使用
provide('provideData', {
  currentDate: data.currentDate,
  years: yearArr,
  months: monthArr,
  days: data.dayArr
});

function handleSetYear(index: number) {
  data.currentDate[0] = yearArr[index];
  data.dayArr = createDayArr(data.currentDate);
  emit('dateChange', toRaw(data.currentDate));
}

function handleSetMonth(index: number) {
  data.currentDate[1] = monthArr[index];
  data.dayArr = createDayArr(data.currentDate);
  emit('dateChange', toRaw(data.currentDate));
}

function handleSetDay(index: number) {
  data.currentDate[2] = data.dayArr[index];
  data.dayArr = createDayArr(data.currentDate);
  emit('dateChange', toRaw(data.currentDate));
}
</script>

<style lang="scss">
.date-picker {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 250px;
  border: 1px solid #ccc;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* 背景渐变 */
  background-image: linear-gradient(
    /* 纵轴180度 */ 180deg,
    /* 
    hsla(色相, 饱和度, 亮度, 透明度)
    */ hsla(0, 0%, 100%, 1),
    hsla(0, 0%, 100%, 0.8),
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.8),
    hsla(0, 0%, 100%, 1)
  );
  pointer-events: none;
}
</style>
